<template>
    <div class="bind-main with-btn">
        <div class="btn-vip" @click="$emit('govip')" />
        <div class="bind-body">
            <div class="title">
                绑定账号
            </div>
            <div class="form">
                <el-form ref="ruleForm" :model="ruleForm" :rules="rules">
                    <el-form-item prop="phone" class="login-input">
                        <el-input
                            v-model="ruleForm.phone"
                            type="phone"
                            auto-complete="off"
                            class="el-input-login"
                            placeholder="手机号"
                        />
                    </el-form-item>
                    <el-form-item prop="password" class="login-input">
                        <el-input
                            v-model="ruleForm.password"
                            type="password"
                            auto-complete="off"
                            class="el-input-login"
                            placeholder="请输入密码"
                        />
                    </el-form-item>
                </el-form>
                <div class="forget">
                    <a
                        href="javascript:void(0);"
                        class="reg-link"
                        @click="showForget"
                        >忘记密码？</a
                    >
                </div>
                <div class="btn-wrap">
                    <button class="reg-btn" @click="login">
                        绑定
                    </button>
                </div>
            </div>
        </div>

        <div class="no-account">
            没有账号?
            <a href="javascript:void(0);" class="reg-link" @click="loginToReg"
                >立即注册</a
            >
        </div>
    </div>
</template>

<script>
export default {
    components: {},
    data() {
        return {
            autoLogin: false,
            dist: { pageName: 'dispatch', query: {} },
            ruleForm: {
                phone: '',
                password: ''
            },
            rules: {
                phone: [
                    {
                        required: true,
                        message: '请输入手机号',
                        trigger: 'blur'
                    },
                    {
                        min: 11,
                        max: 11,
                        message: '请输入11位手机号',
                        trigger: 'blur'
                    }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    {
                        min: 6,
                        max: 18,
                        message: '请输入6-18位密码',
                        trigger: 'blur'
                    }
                ]
            }
        }
    },
    created() {},

    methods: {
        clear(attr) {
            this[attr] = ''
        },
        loginToReg() {
            this.$emit('changePage', 'reg')
        },
        showForget() {
            this.$emit('changePage', 'forget')
        },
        login() {
            const that = this

            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    this.$post('/User/loginByPassword', {
                        username: that.ruleForm.phone,
                        password: that.ruleForm.password,
                        is_remember: that.autoLogin ? 1 : 0,
                        login_code: that.$route.query.login_code
                    }).then(function(resp) {
                        if (resp.code == 1) {
                            that.$notify({
                                title: '成功',
                                message: '绑定成功',
                                duration: 2000,
                                type: 'success'
                            })
                            // location.reload();
                            that.$emit('success')
                        } else {
                            that.$notify.error({
                                title: '错误',
                                duration: 2000,
                                message: resp.msg
                            })
                        }
                    })
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        }
    }
}
</script>
<style lang="less">
.bind-main {
    .reg-verify-code {
        .el-input {
            width: 230px !important;
        }
        .el-input__inner {
            width: 230px !important;
        }
        .code-link {
            width: 105px;
            color: #fff;
            text-decoration: none;
            display: inline-block;
            line-height: 20px;
            margin-left: 10px;
            border-bottom: 1px solid #e8e8e8;
            transform: translateY(5px);
        }
        .code-disabled {
            color: rgba(255, 255, 255, 0.7);
            border-bottom: 1px solid rgba(255, 255, 255, 0.7);
            cursor: default;
        }
    }
    .reg-link {
        color: #ffffff;
    }
    .forget {
        text-align: right;
        width: 350px;
        margin: 0 auto;
    }
    .login-input {
        margin: auto;
        margin-bottom: 20px;
        input,
        input:focus {
            outline: none;
            background-color: transparent;
            border: 0;
            border-radius: 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.5);
            line-height: 30px;
            font-size: 14px;
            color: #fff;
            width: 350px;
            padding-right: 18px;
            padding-left: 5px;
        }
        input:focus {
            border-bottom: 1px solid #fff;
        }
        input::-webkit-input-placeholder {
            color: rgba(255, 255, 255, 0.5);
        }
        input::-moz-placeholder {
            color: rgba(255, 255, 255, 0.5);
        }
        input:-moz-placeholder {
            color: rgba(255, 255, 255, 0.5);
        }
    }
}
</style>
<style lang="less" scoped>
.bind-main {
    position: realtive;
    width: 450px;
    height: 528px;
    background-position: center right;
    background-size: 900px 628px;
    background-repeat: no-repeat;
    background-image: url(//cdn.zsdx.cn/wei/images/hire/login/bg-vip4.png?v=1.1);

    .bind-body {
        position: absolute;
        right: auto;
        left: 50px;
        top: 0px;
        bottom: 0px;
        text-align: center;
        width: 355px;
        .title {
            width: 100%;
            color: #fff;
            font-size: 16px;
            margin-top: 40px;
            margin-bottom: 100px;
            text-align: center;
        }
        .btn-wrap {
            width: 100%;
            .reg-btn {
                display: block;
                width: 350px;
                background: #fff;
                border-radius: 4px;
                border: 0;
                color: #1f2d3d;
                line-height: 40px;
                margin: auto;
                margin-top: 20px;
                font-size: 14px;
                text-decoration: none;
            }
        }
        .login-input {
            margin-bottom: 20px;
        }
    }
    .no-account {
        position: absolute;
        right: 20px;
        bottom: 20px;
        font-size: 16px;
        color: #fff;
        .reg-link {
            text-decoration: underline;
            color: #fff;
            &:hover {
                color: #fff;
            }
        }
    }
}
</style>
<style lang="less">
.with-btn .for-body .form {
    margin: auto;
    margin-bottom: 40px;
    input,
    input:focus {
        outline: none;
        background-color: transparent;
        border: 0;
        border-radius: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.5);
        line-height: 30px;
        font-size: 14px;
        color: #fff;
        width: 350px;
        padding-right: 18px;
        padding-left: 5px;
    }
    .el-input-login {
        input:focus {
            border-bottom: 1px solid #fff;
        }
        input::-webkit-input-placeholder {
            color: #ffffff !important;
            opacity: 0.8;
        }
        input::-moz-placeholder {
            color: #ffffff !important;
            opacity: 0.8;
        }
        input:-moz-placeholder {
            color: #ffffff !important;
            opacity: 0.8;
        }
    }
}
</style>
